<template>
    <!-- 表单查询 -->
    <el-card style="margin-bottom: 10px;">
        <el-form :inline="true" class="demo-form-inline" style="margin-top: 10px;">
            <el-form-item label="货品">
                <el-input v-model="pageinfo.ProductName" placeholder="货品名称或货品类型" clearable />
            </el-form-item>
            <el-form-item label="仓库">
                <el-select v-model="pageinfo.WarehouseId" placeholder="仓库" clearable>
                    <el-option :label="i.warehouseName" :value="i.warehouseId" v-for="i in WarehousetableData" />
                </el-select>
            </el-form-item>
            <el-form-item label="货品类型">
                <el-select v-model="pageinfo.ProducttypeId" placeholder="货品类型" clearable>
                    <el-option :label="i.producttypeName" :value="i.producttypeId" v-for="i in ProductTypetableData" />
                </el-select>
            </el-form-item>
            <el-form-item label="货品显示">
                <el-checkbox value="Online activities" name="type" v-model="pageinfo.Inventorycheck">
                    显示有库存货品
                </el-checkbox>
            </el-form-item>
            <el-form-item>
                <el-button type="success" @click="GetProduct">搜索</el-button>
                <el-button type="info" @click="resetproduct">重置</el-button>
            </el-form-item>
        </el-form>
    </el-card>

    <!-- 货品列表数据 -->
    <el-card style="margin-bottom: 10px;">
        <el-button type="success" @click="jump()"><el-icon>
                <Plus />
            </el-icon>新增</el-button>
        <el-button @click="ChiosDeleteProduct()">删除</el-button>
        <el-button @click="Excellogic.isopen = true">导出</el-button>
        <el-button @click="GetProduct()">刷新</el-button>
        <el-table ref="multipleTableRef" :data="tableData" row-key="productId" style="width: 100%;margin-top: 10px;"
            @selection-change="handleSelectionChange" height="440px">
            <el-table-column type="selection" :selectable="selectable" width="55" fixed="left" />
            <el-table-column type="index" label="序号" width="55" fixed="left" />
            <el-table-column property="productCode" label="货品编号" width="140" fixed="left">
                <template #default="scope">
                    <el-link type="primary" :underline="false"
                        @click="goDetail(scope.row.productCode, scope.row.productId)">
                        {{ scope.row.productCode }}
                    </el-link>
                </template>
            </el-table-column>
            <el-table-column property="productName" label="货品名称" width="180" fixed="left" />
            <el-table-column property="productState" label="货品状态">
                <template #default="scope">
                    <span v-if="scope.row.productState == 1">启用</span>
                    <span v-if="scope.row.productState == 2">禁用</span>
                </template>
            </el-table-column>
            <el-table-column property="producttypeName" label="货品类型" width="120" />
            <el-table-column property="unitName" label="单位" width="120" />
            <el-table-column property="productspecification" label="规格" width="120" />
            <el-table-column property="productBarcode" label="条形码" width="120" />
            <el-table-column property="supplierName" label="供应商" width="220" />
            <el-table-column property="customerName" label="客户名称" width="180" />
            <el-table-column property="productInmoney" label="入库参考价" width="100" />
            <el-table-column property="productOutmoney" label="出库参考价" width="100" />
            <el-table-column property="productOrderby" label="显示顺序" />
            <el-table-column property="inventoryCurrtnumber" label="当前库存" />
            <el-table-column property="inventoryMoney" label="库存金额" />
            <el-table-column property="productShelf" label="保质期管理" width="120">
                <template #default="scope">
                    <span v-if="scope.row.productShelf == 1">开启</span>
                    <span v-if="scope.row.productShelf == 2">关闭</span>
                </template>
            </el-table-column>
            <el-table-column property="productShelfday" label="保质期" width="100" />
            <el-table-column property="productWarningDay" label="预警天数(天)" width="120" />
            <el-table-column property="productNote" label="备注" width="190" />
            <el-table-column property="createor" label="操作人" width="120" />
            <el-table-column property="createrTime" label="操作时间" width="200" />
            <el-table-column label="操作" fixed="right" width="170">
                <template #default="scope">
                    <el-button link size="small" type="danger" @click="DeleteProduct(scope.row.productId)">删除</el-button>
                    <el-button link size="small" type="warning" @click="jump(scope.row)">修改</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-card>

    <!-- 分页 -->
    <el-card>
        <el-pagination v-model:current-page="pageinfo.Pageindex" v-model:page-size="pageinfo.PageSize"
            :page-sizes="[5, 10, 15, 20]" :background="true" layout="total, sizes, prev, pager, next, jumper"
            :total="pageinfo.listCount" />
    </el-card>

    <el-dialog v-model="Excellogic.isopen" title="货品信息导出" width="500">
        <el-form>
            <el-form-item label="导出条数">
                <el-input v-model="Excellogic.PageSize" autocomplete="off" />
            </el-form-item>

        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="Excellogic.isopen = false">取消</el-button>
                <el-button type="primary" @click="Excel(), Excellogic.isopen = false">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>

</template>

<script lang="ts" setup>
import { onMounted, reactive, ref, watch } from 'vue'
import myaxios from "@/http/MyAxios";
import { ElMessage, ElMessageBox, type TableInstance } from 'element-plus'
import { useRouter, useRoute } from 'vue-router';

import {
    Plus,
    Menu as IconMenu,
    Location,
    Setting,
} from '@element-plus/icons-vue'

const router = useRouter();

// 跳转详情页
const goDetail = (code: string, productId?: number) => {
    if (!code) return
    const query: any = { productCode: code }
    if (productId) {
        query.productId = productId
    }
    router.push({ path: '/ProductDetail', query })
}

//导出弹框
const Excellogic = reactive({
    isopen: false,
    PageSize: null,
})

//货品导出
const Excel = () => {
    location.href = `http://localhost:8080/api/Product/ExcelProduct?Pageindex=1&PageSize=${Excellogic.PageSize}`;
}

//批量逻辑删除货品信息
const ChiosDeleteProduct = () => {
    ElMessageBox.confirm(
        '确认删除这些信息吗?',
        '警告',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            myaxios({
                url: "/api/Product/ChoiceDel",
                method: "put",
                data: multipleSelection.value.map((x: any) => x.productId)
            })
                .then(res => {
                    console.log(multipleSelection.value.map((x: any) => x.productId));

                    if (res.data.code == 200) {
                        GetProduct();
                        ElMessage.success(res.data.message);
                    }
                    else {
                        ElMessage.error(res.data.message);
                    }
                })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消',
            })
        })

}

//逻辑删除货品信息
const DeleteProduct = (id: any) => {
    ElMessageBox.confirm(
        '确认删除这条信息吗?',
        '警告',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            myaxios({
                url: "/api/Product/DelteProduct",
                method: "put",
                params: { id: id }
            })
                .then(res => {
                    if (res.data.code == 200) {
                        GetProduct();
                        ElMessage.success(res.data.message);
                    }
                    else {
                        ElMessage.error(res.data.message);
                    }
                })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消',
            })
        })

}

//跳转添加页面
const jump = (row?: any) => {
    if (row != null) {
        router.push({
            path: "/CreateProdut",
            query: {
                productId: row.productId,
                productName: row.productName,
                producttypeId: row.producttypeId,
                customerId: row.customerId,
                supplierId: row.supplierId,
                productCode: row.productCode,
                productState: row.productState,
                productUnit: row.productUnit,
                productBarcode: row.productBarcode,
                supplierName: row.supplierName,
                customerName: row.customerName,
                productInmoney: row.productInmoney,
                productOutmoney: row.productOutmoney,
                productShelf: row.productShelf,
                productWarningDay: row.productWarningDay,
                productOrderby: row.productOrderby,
                productShelfday: row.productShelfday,
                inventoryId: row.inventoryId,
                productNote: row.productNote,
                productspecification: row.productspecification,

            }
        })
    }
    else {
        router.push({
            path: "/CreateProdut",
        })
    }


}

//重置
const resetproduct = (() => {
    pageinfo.Inventorycheck = false;
    pageinfo.ProductName = "";
    pageinfo.ProducttypeId = null;
    pageinfo.WarehouseId = null;
})

//分页查询条件
const pageinfo = reactive({
    pageCount: 0,
    listCount: 0,
    Pageindex: 1,
    PageSize: 10,
    ProductName: "",
    ProducttypeId: null,
    WarehouseId: null,
    Inventorycheck: false,
})
//------------------------------多选------------------------------------------

interface User {
    id: number
    date: string
    name: string
    address: string
}

const multipleTableRef = ref<TableInstance>()
const multipleSelection = ref<User[]>([])

const selectable = (row: User) => ![1, 2].includes(row.id)

const handleSelectionChange = (val: User[]) => {
    multipleSelection.value = val
}
//----------------------------------------------------------------------------
//仓库信息接收
const WarehousetableData: any = ref([])

//仓库信息请求
const GetWarehouse = () => {
    myaxios({
        url: "/api/Product/GetWarehouse",
        method: "get",
    })
        .then(res => {
            WarehousetableData.value = res.data.data;
        })
        .catch(err => {
            console.log(err);
        })
}

//货品类型信息接收
const ProductTypetableData: any = ref([])

//货品类型信息请求
const GetProductType = () => {
    myaxios({
        url: "/api/Product/GetProductType",
        method: "get",
    })
        .then(res => {
            ProductTypetableData.value = res.data.data;
        })
        .catch(err => {
            console.log(err);
        })
}

//货品信息接收
const tableData = ref([])

//货品信息请求
const GetProduct = () => {

    myaxios({
        url: "/api/Product/GetProduct",
        method: "get",
        params: {
            Pageindex: pageinfo.Pageindex,
            PageSize: pageinfo.PageSize,
            ProductName: pageinfo.ProductName,
            ProducttypeId: pageinfo.ProducttypeId,
            WarehouseId: pageinfo.WarehouseId,
            number: pageinfo.Inventorycheck == false ? 1 : 2
        }
    })
        .then(res => {
            tableData.value = res.data.data.data;
            pageinfo.listCount = res.data.data.listCount;
            pageinfo.pageCount = res.data.data.pageCount;
        })
        .catch(err => {
            console.log(err);
        })
}

//钩子函数
onMounted(() => {
    GetProduct();//货品信息请求
    GetProductType();//货品类型信息请求
    GetWarehouse();//仓库信息请求
})

//侦听器
watch(pageinfo, () => {
    GetProduct();//货品信息请求
}, { deep: true })
</script>

<style>
.demo-form-inline .el-input {
    --el-input-width: 220px;
}

.demo-form-inline .el-select {
    --el-select-width: 220px;
}
</style>